<template>
	<view class="navigation">
		<eui-navbar ref="EuiNavBar" title="顾客群组" displayable="true" color="#000000" backgroundColor="#FFFFFF"
			rightIcon="" />
		<view class="main-view">
			<scroll-view :style="{width:scrollWidth,height:scrollHeight}" scroll-y>
				<view class="approve-list flex flex-direction-column font-size-28 margin-bottom-20"
					v-for="(item,index) in group" :key="index">
					<eui-card>
						<view class="title">
							<view class="twice">
								{{item.groupName}}
							</view>
							<view class="consumeitem" style="justify-items: center;margin-top: 20rpx;">
								<view class="custtitle">编码</view>
								<view class="consumetext">{{item.groupCode}}
								</view>
							</view>
							<!-- <view>
								<view class="consumeitem">
									<view class="custtitle">编码</view>
									<view class="consumetext">{{item.groupCode}}
									</view>
								</view>
								<view class="consumeitem">
									<view class="custtitle">说明</view>
									<view class="consumetext">{{item.c_note}}
									</view>
								</view>
							</view> -->
							
						</view>

					</eui-card>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script setup lang="js">
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		computed,
		onMounted,
		ref
	} from "vue";
	import {
		getCrmUrl,
		crmRequest,
		crmRequestAsync
	} from '@/hooks/crmServices';
	import dayjs from 'dayjs';
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth + 'px');
	const scrollHeight = ref(uni.getSystemInfoSync().windowHeight + 'px');
	const group = ref([]);
	const crmUrl = getCrmUrl();
	// 获取列表高度
	onReady(() => {
		uni.getSystemInfo({
			success: function(res) {
				const userInfoPage = uni.createSelectorQuery().select(".uni-navbar");
				userInfoPage.boundingClientRect(function(data) {
					console.log('scrollHeight.value')
					console.log(scrollHeight.value)
					scrollHeight.value = (res.windowHeight - data.height) + 'px';
				}).exec()
			}
		});
	})
	onLoad((options) => {
		const {
			groups
		} = options;
		const decodedData = decodeURIComponent(groups);
		group.value = JSON.parse(decodedData);
		console.log('group')
		console.log(group.value)
	});
</script>

<style scoped lang="scss">
	@import '@/main.scss';

	.consumetext {
		font-size: 13px;
		margin-top: 4rpx;
	}

	.consumeitem {
		display: flex;
		flex-direction: row; //水平排列
		justify-content: flex-start;
		width: 300rpx;
		flex-wrap: wrap;
		margin-top: 4rpx;
		margin-left: 100rpx;
	}

	.custtitle {
		font-size: 26rpx;
		margin-right: 20rpx;
		margin-top: 2rpx;
		color: #8a8a8a;
	}

	.title {
		display: flex;
		margin-bottom: 0rpx;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		height: 100%;
	}

	.titletext {
		margin-right: 20rpx;
		font-weight: 600;
	}

	.twice {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100rpx;
		height: 100rpx;
		background-color: #2bc1e6;
		border-radius: 10rpx;
		font-size: 11px;
		justify-content: center;
		text-align: center;
		align-items: center;
		color: #ffffff;
	}

	.scoreinfo {
		display: flex;
		flex-direction: row; //水平排列
		justify-content: space-between; //纵向均匀排列
		flex-wrap: wrap;
	}

	.numadd {
		display: flex;
		justify-content: flex-end;
		color: #43c187;
	}

	.numcut {
		display: flex;
		justify-content: flex-end;
		color: #d81e06;
	}

	.navigation {
		display: flex;
		width: 100%;
		flex-direction: column;
		background: #F2F2F2;
	}

	.main-view {
		flex: 1;
		flex-direction: column;
		background-color: #f2f2f2;
	}

	.m-card-input-view2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 80rpx;
		background: $uni-bg-color-inverse;
		box-sizing: border-box;
		border-bottom: 1rpx solid #EEEEEE;
		padding-left: 0px;
		justify-content: center; //纵向均匀排列
	}

	.m-card-input-title2 {
		width: 185rpx;
		height: 40rpx;
	}

	.m-title-text2 {
		font-size: $uni-font-size-level3;
		font-family: $uni-font-family;
		font-weight: $uni-font-weight-level1;
		color: $uni-text-color-title;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.time-view {
		display: flex;
		flex-direction: column;
	}
</style>